<template>
  <div>
    <div class="title"></div>
    <div style="display: flex; flex-direction: row-reverse;">
      <el-card shadow="hover" style="text-align:left; flex: 1; margin-left: 10px; border: 1px solid rgba(120, 120, 120, 0.9); background-color: rgba(255, 255, 255, 0.15);">
        <h2 style="font-size: 1.8em;"><span style="color: white; margin-left: 5%;">{{ birdInfo.name }}
        <el-button type="text" icon="el-icon-delete" style="float: right; margin-right: 5%;" @click="deleteBirdInfo">删除</el-button>
        <el-button type="text" icon="el-icon-edit" style="float: right; margin-right: 5%;" @click="editBirdInfo">编辑</el-button>
        </span></h2>
        <pre v-if="!birdInfo.isEditing" style="font-size: 1.6em; color: white; margin-left: 5%; margin-right: 5%;">
        <div v-for="line in birdInfo.info.split('\n')" :key="line" style="display: flex; justify-content: space-between;">
            <span style="font-weight: bold; margin-right: 5px;">{{ line.split(':')[0] }}</span>
            <span>{{ line.split(':').slice(1).join(':') }}</span>
          </div>
        </pre>
        <el-input v-if="birdInfo.isEditing" type="textarea" :rows="10" placeholder="请输入鸟类信息" v-model="birdInfo.info" style="font-size: 1.5em;"></el-input>
        <el-button v-if="birdInfo.isEditing" @click="saveBirdInfo">保存</el-button>
      </el-card>

      <el-card shadow="hover" style="flex: 1; margin-right: 10px; border: 1px solid rgba(120, 120, 120, 0.9); background-color: rgba(255, 255, 255, 0.15);">
        <img src="./images/b3.png" alt="鸟类照片" style="height: 550px; width: 750px;">
      </el-card>
    </div>
<br>

<el-card shadow="hover" style="flex: 1; margin-left: 10px; border: 1px solid rgba(120, 120, 120, 0.9); background-color: rgba(255, 255, 255, 0.15);">
  <!-- 添加索引栏 -->
  <div style="display: flex; justify-content: space-between; padding: 10px; background-color: rgba(0, 0, 0, 0.2);">
  <div v-for="letter in letters" :key="letter" style="cursor: pointer; color: white;" @click="scrollToLetter(letter)">
    {{ letter }}
  </div>
</div>

<br>
  <div style="display: flex; justify-content: left;">
    <!-- 鸟类卡片 1 -->
    <div @click="goToBirdPage(1)" style="text-align: center;">
      <img src="./images/b1.png" alt="鸟类照片" style="height: 80px; width: 120px;"><br>
      <a href="/prettyGood" style="color:white; text-decoration:none; text-align: center; margin-right: 10px;">斑尾榛鸡</a>
    </div>

    <!-- 鸟类卡片 2 -->
    <div @click="goToBirdPage(2)" style="text-align: center;">
      <img src="./images/b2.png" alt="鸟类照片" style="height: 80px; width: 120px;"><br>
      <a href="/prettyGood1A" style="color:white; text-decoration:none; text-align: center; margin-right: 10px;">柳雷鸟</a>
    </div>

    <!-- 鸟类卡片 3 -->
    <div @click="goToBirdPage(3)" style="text-align: center;">
      <img src="./images/b3.png" alt="鸟类照片" style="height: 80px; width: 120px;"><br>
      <a href="/prettyGood1B" style="color:white; text-decoration:none; text-align: center; margin-right: 10px;">黑嘴松鸡</a>
    </div>
  </div>
  <!-- 添加更多鸟类 --> 
</el-card>

  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';

// 模拟数据
const birdInfo = reactive({
  id: 3,
  name: "黑嘴松鸡",
  info: "拉丁学名: Tetrao urogalloides\n别名: 细嘴松鸡、林鸡\n外文名: Black-billed Capercaillie\n界: 动物界\n门: 脊索动物门\n纲: 鸟纲\n目: 鸡形目\n科: 松鸡科\n属: 松鸡属\n种: 黑嘴松鸡\n亚种: 3亚种\n命名者及时间: Middendorff, 1851\n保护级别: 无危(LC)",
  image: "./images/b3.png",
  isEditing: false,
});

const { isEditing } = toRefs(birdInfo);

const editBirdInfo = () => {
  birdInfo.isEditing = true;
};

const deleteBirdInfo = () => {
  // 删除鸟类信息
};

const saveBirdInfo = () => {
  birdInfo.isEditing = false;
  // 保存鸟类信息的逻辑
};

const birdList = ref([
  { id: 1, text: "斑尾榛鸡", image: "./images/b1.png", birdId: 1 },
  { id: 2, text: "柳雷鸟", image: "./images/b2.png", birdId: 2 },
  { id: 3, text: "黑嘴松鸡", image: "./images/b3.png", birdId: 3 },
  // 添加更多鸟类数据
]);

const letters = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']);

const scrollToLetter = (letter) => {
  // 实现滚动到相应的字母位置的逻辑
  // 可以通过 ref 或其他方式获取相应的元素并滚动到它的位置
  console.log(`Scroll to ${letter}`);
};

const goToBirdPage = (birdId) => {
  // 实现跳转到鸟类页面的逻辑
  console.log(`Go to bird page ${birdId}`);
  birdId === 1 ? window.location.href = "/prettyGood" :
      birdId === 2 ? window.location.href = "/prettyGood1A" :
          birdId === 3 ? window.location.href = "/prettyGood1B"  : window.location.href = "/prettyGood"
}
</script>
<style scoped lang="less">
.title {
  background-image: url("images/icon_title.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 40px;
  margin-bottom: 10px;
}
</style>
